<template>
    <div>
        <city-header></city-header>
        <city-search :cities="cities"></city-search>
        <city-list :cities="cities" :hotcities="hotCities" :letter="letter"></city-list>
        <!-- 父组件监听change事件 -->
        <city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>
    </div>
</template>
<script>
import CityHeader from "./components/Header";
import CitySearch from "./components/search";
import CityList from "./components/List";
import cityAlphabet from "./components/Alphabet";
import axios from "axios";
export default {
    name: "City",
    components: {
        CityHeader,
        CitySearch,
        CityList,
        cityAlphabet
    },
    data() {
        return {
            cities: {},
            hotCities: [],
            letter: ""
        };
    },
    methods: {
        getCityInfo() {
            this.$get(
                "api/list",
                // {
                //     id:123,
                // },
                // {
                //     baseURL: "http://jd.com",
                //     transformRequest(params) {
                //         return JSON.stringify(params);
                //     }
                // }
            ).then(this.handleGetCityInfoSucc)
             
        },
        handleGetCityInfoSucc(res) {
             res = res.data;
            if (res.ret && res.data) {
                this.cities = res.data.cities;
                this.hotCities = res.data.hotCities;
            }
        },
        handleLetterChange(letter) {
            //定义change事件，letter为子组件传过来的值
            this.letter = letter; //将子组件的letter赋值给父组件的letter，并通过属性的方式向另一个子组件传值
        }
    },
    mounted() {
        this.getCityInfo(); //在页面渲染之后发送请求
    }
};
</script>
<style lang="stylus" scoped>
</style>
